<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <title>个人主页</title>
        <link rel="shortcut icon" href="img/favicon.ico"/>
        
        <!--load stylesheets -->
	<!--
        <link rel="stylesheet" href="http://fonts.useso.com/css?family=Open+Sans:300,300italic,400">        <!-- Google web font "Open Sans" -->
        -->
        <link rel="stylesheet" href="css/bootstrap.min.css">                                                <!-- Bootstrap style -->
        <link rel="stylesheet" href="css/flexslider.css">                                                   <!-- Flexslider style -->       
        <link rel="stylesheet" href="css/templatemo-style.css">                                             <!-- Templatemo style -->

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elemepnts and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
       
	<!--
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
	-->
    </head>
    
    <body class="page">
        
            
            <!-- background images -->
            <div class="page-bg-imgs-list">
                <img src="img/story-bg-1.jpg" id="page-1-img" class="main-img" alt="About">
                <img src="img/story-bg-2.jpg" id="page-2-img" alt="Gallery">
                <img src="img/story-bg-3.jpg" id="page-3-img" alt="Services">
                <img src="img/story-bg-4.jpg" id="page-4-img" alt="Contact">                            
            </div>
            
            <div class="container-fluid">

                <div class="row">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-5 col-xl-5">
                        
                        <div class="header">

                            <!-- site title -->
                            <header class="box box-white">
                                <a href="javascript:void(0)" class="js-site-title">
                                    <h1 class="box-text site-title-text">故事 Story</h1>    
                                </a>            
                            </header>
                            
                            <!-- site navigation -->
                            <nav class="js-nav">
                                <ul class="nav-items-container">

                                    <li data-nav-item-id="page-1" class="block-keep-ratio block-keep-ratio-1-1 block-width-half box box-white box-nav-item js-nav-item pull-xs-left">
                                        <a href="#page-1" class="block-keep-ratio-content box-nav-item-link">
                                            <span class="box-text box-text-nav-item flexbox-center">关于 &nbspAbout</span>
                                        </a>
                                    </li>

                                    <li data-nav-item-id="page-2" class="block-keep-ratio block-keep-ratio-1-1 block-width-half box box-white box-nav-item js-nav-item pull-xs-right">
                                        <a href="#page-2" class="block-keep-ratio-content box-nav-item-link">
                                            <span class="box-text box-text-nav-item flexbox-center">相册Galllery</span>
                                        </a>
                                    </li>

                                    <li data-nav-item-id="page-3" class="block-keep-ratio block-keep-ratio-1-1 block-width-half box box-white box-nav-item js-nav-item pull-xs-left">
                                        <a href="#page-3" class="block-keep-ratio-content box-nav-item-link">
                                            <span class="box-text box-text-nav-item flexbox-center">服务Services</span>
                                        </a>
                                    </li>

                                    <li data-nav-item-id="page-4" class="block-keep-ratio block-keep-ratio-1-1 block-width-half box box-white box-nav-item js-nav-item pull-xs-right">
                                        <a href="#page-4" class="block-keep-ratio-content box-nav-item-link">
                                            <span class="box-text box-text-nav-item flexbox-center">联系Contact</span>
                                        </a>
                                    </li>

                                </ul>
                            </nav>    
                        </div> <!-- .header -->

                    </div>
                    

                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-7 col-xl-7">
                        <div class="content-wrapper js-content-wrapper">
                            <!-- about -->
                            <section data-page-id="page-1" class="content js-content">
                                
                                <header class="box box-black margin-b-20">
                                    <h2 class="box-text page-title-text">故事Story</h2>
                                </header>
                                
                                <div class="content-text">
                                    <p>我的主页 <a rel="nofollow" href="http://cement.oschina.io/personal"target="_parent">个人主页</a>
	                            你可以访问我的主页，了解更详细的信息。
                                    </p>
                                    <p>
				    有关我的开源项目请访问：<a href="https://cement.github.io/"target="_parent">开源项目</a>

                                    </p>
                                </div>            

                            </section> <!-- #about -->

                            <!-- gallery -->
                            <section data-page-id="page-2" class="content content-gallery js-content">
                                
                                <header class="box box-black margin-b-20">
                                    <h2 class="box-text page-title-text">相册Galllery</h2>
                                </header>
                                
                                <div class="content-text content-text-gallery">
                                    
                                    <!-- <p>Credits go to <a rel="nofollow" href="http://unsplash.com">Unsplash</a> for images.</p> -->

                                    <div class="flexslider-wrapper">

                                        <div id="slider" class="flexslider">
                                            <ul class="slides">
                                                <li><img src="img/slider/slide1.jpg" alt="Slide 1" /></li>
                                                <li><img src="img/slider/slide2.jpg" alt="Slide 2" /></li>
                                                <li><img src="img/slider/slide3.jpg" alt="Slide 3" /></li>
                                                <li><img src="img/slider/slide4.jpg" alt="Slide 4" /></li>
                                                <li><img src="img/slider/slide5.jpg" alt="Slide 5" /></li>
                                                <li><img src="img/slider/slide6.jpg" alt="Slide 6" /></li>
                                            </ul>
                                        </div> <!-- #slider -->
                                      
                                        <div id="carousel" class="flexslider">
                                            <ul class="slides">
                                                <li><img src="img/slider/thumb1.jpg" alt="Thumbnail 1" /></li>
                                                <li><img src="img/slider/thumb2.jpg" alt="Thumbnail 2" /></li>
                                                <li><img src="img/slider/thumb3.jpg" alt="Thumbnail 3" /></li>
                                                <li><img src="img/slider/thumb4.jpg" alt="Thumbnail 4" /></li>
                                                <li><img src="img/slider/thumb5.jpg" alt="Thumbnail 5" /></li>
                                                <li><img src="img/slider/thumb6.jpg" alt="Thumbnail 6" /></li>
                                            </ul>
                                        </div>  <!-- #carousel -->

                                    </div>
                                        
                                </div>            

                            </section> <!-- #gallery -->
                            
                            <!-- services -->
                            <section data-page-id="page-3" class="content js-content">
                                
                                <header class="box box-black margin-b-20">
                                    <h2 class="box-text page-title-text">服务Services</h2>
                                </header>
                                
                                <div class="content-text">
				    <h3>主标题<h3>

                                    <p>这里是主要的介绍</p>
                                    <h4>子标题</h4>
                                    <p>这里是关于我的一些简单介绍</p>
                                    <h4>子标题</h4>
                                    <p>这里是关于我的一些简单介绍</p>
                                </div>            

                            </section> <!-- #services -->

                            <!-- contact -->
                            <section data-page-id="page-4" class="content js-content">
                                
                                <header class="box box-black margin-b-20">
                                    <h2 class="box-text page-title-text">联系Contact</h2>
                                </header>
                                
                                <div class="content-text">
                                    <p>可以在这里给我发送你的问题，我会在第一时间给予回复。
                                    </p>
                                    <form action="index.html" method="post" class="contact-form">

                                        <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 form-group-2-col-left">
                                            <input type="text" id="contact_name" name="contact_name" class="form-control" placeholder="名字Name" required/>
                                        </div>
                                        <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6 form-group-2-col-right">
                                            <input type="email" id="contact_email" name="contact_email" class="form-control" placeholder="邮箱Email" required/>
                                        </div>
                                        <div class="form-group">
                                            <input type="text" id="contact_subject" name="contact_subject" class="form-control" placeholder="标题Subject" required/>
                                        </div>
                                        <div class="form-group">
                                            <textarea id="contact_message" name="contact_message" class="form-control" rows="4" placeholder="说点什么吧Message" required></textarea>
                                        </div>
                                        <button type="submit" class="btn btn-primary submit-btn">发送Send</button>

                                    </form>                           
                                </div>            

                            </section> <!-- #contact -->
                        </div>
                    </div>

                </div>
                    
                <!-- footer row -->
                <footer class="row footer js-footer">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                        <p class="copyright-text">Copyright &copy; 2016 YSH 
                        
                        | More Content <a href="http://cement.oschina.io/personal/" target="_blank" title="个人之家">个人之家</a> - Collect from <a href="http://cement.oschina.io/" title="个人之家" target="_blank">个人之家</a></p>  

                    </div>                
                </footer>

            </div>  <!-- .container-fluid -->

        <div id="preloader">
            <div id="status">&nbsp;</div>
        </div><!-- /#preloader -->      
            
        <!-- load JS files -->
        <script src="js/jquery-1.11.3.min.js"></script> <!-- jQuery -->
        <script src="js/jquery.flexslider-min.js"></script> <!-- Flex Slider -->
        <script src="js/jquery.backstretch.min.js"></script> <!-- Backstretch http://srobbin.com/jquery-plugins/backstretch/ -->
        <script src="js/templatemo-script.js"></script> <!-- Templatemo scripts -->
    
    </body>
</html>
